<template>
  <div class="goods-list">
    <div
      class="goods-item"
      v-for="item in seckillGoods"
    >
      <div class="goods-img">
        <img :src="item.data.hd_thumb_url">
      </div>
      <div class="goods-info">
        <div class="goods-name">{{item.data.goods_name}}</div>
        <div class="goods-buy">
          <div class="item-status">
            <div class="status-bar">
              <span v-if="Math.round((item.data.sold_quantity/item.data.all_quantity)*100)===100">即将售馨</span>
              <span v-else>{{Math.round((item.data.sold_quantity/item.data.all_quantity)*100)}}%</span>
              <van-progress
                :show-pivot="false"
                color="#f44"
                :percentage="Math.round((item.data.sold_quantity/item.data.all_quantity)*100)"
              />

            </div>
            <div class="status-num">已抢{{item.data.sold_quantity}}</div>
          </div>
          <div class="goods-tag">
            <span>{{item.data.coupon}}</span>
          </div>
          <div class="button-on">
            <div class="all-price">
              <div class="current-price">
                <span class="sale-symbol">￥</span>
                <span class="sale-price">{{item.data.price/100}}</span>
              </div>
              <span class="market-price">￥<span class="market">{{item.data.market_price/100}}</span></span>
            </div>
            <div class="btnClass">
              <van-button
                type="danger"
                size="small"
              >马上抢
                <van-icon name="arrow" />
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["seckillGoods"]
};
</script>

<style lang="less" scoped>
.goods-item {
  background-color: #fff;
  height: 1.39rem;
  line-height: 1.5;
  position: relative;
  .goods-img {
    height: 1.2rem;
    width: 1.2rem;
    float: left;
    position: relative;
    img {
      width: inherit;
      height: auto;
      float: left;
      padding: 0.09rem 0 0.1rem;
      background: #fff;
    }
  }
  .goods-info {
    height: 100%;
    width: 2.41rem;
    display: inline-block;
    position: relative;
    left: 0.14rem;
    border-bottom: 0.01rem solid #e5e5e5;
    .goods-name {
      overflow: hidden;
      width: 2.29rem;
      height: 0.4rem;
      line-height: 0.2rem;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      position: absolute;
      font-size: 0.14rem;
      top: 0.115rem;
      color: #151516;
    }
    .goods-buy {
      height: 0.79rem;
      position: absolute;
      bottom: 0.08rem;
      padding-top: 0.05rem;
      // font-size: 0;
      width: 100%;
      .item-status {
        display: flex;
        height: 16px;
        margin-top: 0.01rem;
        .status-bar {
          position: relative;
          width: 129px;
          height: 100%;
          border-radius: 11px;
          span {
            height: 100%;
            width: 100%;
            position: absolute;
            color: #fff;
            z-index: 1;
            font-size: 0.12rem;
            font-weight: 700;
            text-align: center;
          }
          .van-progress {
            height: 100%;
            border-radius: 0.1rem;
            background-color: #f2aba9;
          }
        }
        .status-num {
          font-size: 0.11rem;
          line-height: 16px;
          padding-left: 0.11rem;
          color: #e02e24;
        }
      }
      .goods-tag {
        margin-top: 0.1rem;
        margin-left: 0.01rem;
        span {
          height: 0.13rem;
          overflow: hidden;
          font-size: 0.11rem;
          color: #e02e24;
          background-color: #fff2f2;
          padding: 0 0.01rem;
          border-radius: 0.01rem;
          line-height: 0.14rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
      }
      .button-on {
        .all-price {
          display: inline-block;
          position: absolute;
          bottom: 0.04rem;
          color: #e02e24;
          .current-price {
            display: inline-block;
            position: relative;
            .sale-symbol {
              font-size: 0.12rem;
              font-weight: 700;
            }
            .sale-price {
              position: relative;
              line-height: 0.2rem;
              font-size: 0.2rem;
              font-weight: 700;
            }
          }
          .market-price {
            overflow: hidden;
            font-size: 0.12rem;
            color: #9c9c9c;
            text-decoration: line-through;
            text-decoration-color: #9c9c9c;
            width: 100%;
            margin-left: 0.06rem;
          }
        }
        .btnClass {
          display: inline-block;
          height: 0.3rem;
          width: 0.71rem;
          position: absolute;
          bottom: 0.04rem;
          right: 0.12rem;
        }
      }
    }
  }
}
</style>

